<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>弹跳彩球</title>
    <style>
      html, body {
        margin: 0;
      }

      html {
        font-family: sans-serif;
        height: 100%;
      }

      body {
        overflow: hidden;
        height: inherit;
      }

      h1 {
        font-size: 2rem;
        letter-spacing: -1px;
        position: absolute;
        margin: 0;
        top: -4px;
        right: 5px;

        color: transparent;
        text-shadow: 0 0 4px white;
      }
    </style>
  </head>

  <body>
    <h1>弹跳彩球</h1>
    <canvas></canvas>

    <script>
      // 设置画布

      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');

      const width = canvas.width = window.innerWidth;
      const height = canvas.height = window.innerHeight;

      // 生成随机数的函数

      function random(min, max) {
        return Math.floor(Math.random() * (max - min)) + min
      }

      function randomColor() {
        return 'rgb(' +
                random(0, 255) + ', ' +
                random(0, 255) + ', ' +
                random(0, 255) + ')';
      }


      function Ball(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.color = color;
        this.size = size;
      }

      Ball.prototype.draw = function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();

      }

      Ball.prototype.update = function () {
        if((this.x+this.size) >= width){
          this.velX = -(this.velX)
        }

        if ((this.x - this.size) <= 0){
          this.velX = -(this.velX)
        }

        if((this.y+this.size) >= height){
          this.velY = -(this.velY)
        }

        if ((this.y - this.size) <= 0){
          this.velY = -(this.velY)
        }

        this.x += this.velX;
        this.y += this.velY;
      }

      Ball.prototype.collisionDetect = function(){
        for (let j = 0;j<balls.length;j++){
          if (this !==balls[j]){
            const dx = this.x -balls[j].x;
            const dy = this.y - balls[j].y;
            const distance = Math.sqrt(dx * dx +dy * dy );

            if (distance < this.size + balls[j].size) {
              balls[j].color = this.color = randomColor();
            }
          }
        }
      }

      let balls = [];
      while (balls.length<30) {
        let size = random(10,20);
        let ball = new Ball(
                random(0 + size,width - size),
                random(0 + size,width - size),
                random(-7,7),
                random(-7,7),
                randomColor(),
                size
        );
        balls.push(ball)
      }

      function loop() {
        ctx.fillStyle = 'rgba(0,0,0,0.25)';
        ctx.fillRect(0,0,width,height);

        for (let i = 0;i<balls.length;i++){
          balls[i].draw();
          balls[i].update();
          balls[i].collisionDetect();
        }
        requestAnimationFrame(loop);

      }

      loop();

    </script>
  </body>
</html>